<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>Hello APICloud</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/common.css" />
        <style>
                .center{
                        display:-webkit-box;
                        -webkit-box-orient:vertical;
                        -webkit-box-pack:center;
                        -webkit-box-align:center;
                }
        </style>
</head>
<body style='background:#EDEDED;'>
    <div id="wrap">
        <div id="main" class='center'>
                <img id='loading' src='image/loading.gif' width=65 height=65>
        </div>
    </div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
   
    var launchRemoved = false;
    var loadingRemoved = false;
   
        apiready = function(){
        api.setStatusBarStyle({
            style: 'light'
        });
        api.openFrame({
            name: 'main',
            url: 'http://43.128.47.87:8082/',
            bounces: false,
            allowEdit:true,
            rect: {
                w: 'auto',
                h: 'auto'
            },
            progress:{
                type:'page'
            }
        });
                api.setFrameClient({
                    frameName:'main'
                },function(ret){
                    onBrowserStateChange(ret);
                });
                removeLogic();
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err){
            api.historyBack({
                frameName:'main'
            },function(ret,err){
                if(!ret.status){
                    api.closeWidget();
                }
            });
        });
                removeLogic();
    };

        function onBrowserStateChange(ret){
            if(0 == ret.state){//开始加载
                        if(!launchRemoved){
                                launchRemoved = true;
                                removeLaunch();
                        }
            }
            if(2 == ret.state){
                    if(!loadingRemoved){
                            loadingRemoved = true;
                            document.getElementById('loading').style.display = 'none';
                    }
            }
    }
       
        function removeLogic(){
                setTimeout(function(){
                        if(!launchRemoved){
                                launchRemoved = true;
                                removeLaunch();
                        }
                }, 3000);
        }

        function removeLaunch(){
                api.removeLaunchView({
                        animation:{
                                type:"fade",
                                subType:"from_right",
                                duration:300
                        }
                });
        }
</script>
</html>